<template>
    <view class="uls">
        <view class="u-border-bottom" @click="seatClick(item)" v-for="(item, index) in filmList" :key="index">
            <view class="lis">
                <view class="lis-left">
                    <view class="lis-time">{{ getDateTime(item, 'start') }}</view>
                    <view class="lis-timetips">{{ getDateTime(item, 'end') }}</view>
                </view>
                <view class="lis-center">
                    <view class="lis-flex">
                        <view class="lis-top">
                            <view class="lis-name">{{ item.language }} {{ item.version }}</view>
                        </view>
                        <view class="lis-bottom">{{ item.hallName }}</view>
                    </view>
                </view>
                <view class="lis-right">
                    <view class="lis-btn" v-if="getPublishDate(item)">
                        <x-btn text="购票"></x-btn>
                    </view>
                    <view class="lis-btn2" v-else>
                        <x-btn text="预售"></x-btn>
                    </view>
                </view>
            </view>
            <view class="lis bottom">
                <view class="bottom-left">
                    <view class="li__market">￥{{ parseFloat(item.showPrice).toFixed(2) }}</view>
                </view>
                <view class="bottom-left">
                    <view class="li__price__num">￥{{ item.settlementPrice }}</view>
                </view>
            </view>
        </view>
        <u-divider text="结束" v-if="filmList.length > 0"></u-divider>
    </view>
</template>

<script>
import service from '../service.js';

import xBtn from '@/sub_pages/movie/components/x-btn/x-btn.vue';

export default {
    components: { xBtn },

    props: {
        filmList: {
            type: Array,
            default: () => [],
        },
        cinemaModel: {
            type: Object,
            default: () => {},
        },
        cinemaId: {
            type: String,
            default: '',
        },
    },
    methods: {
        getDateTime(e, type) {
            return service.getDateTime(e, type);
        },
        getPublishDate(e) {
            return service.getPublishDate(e);
        },
        async seatClick(e) {
            if (e.isItWithinTwoHours) {
                return false;
            }
            let para = {
                ...e,
                filmId: this.cinemaModel.filmId,
                filmName: this.cinemaModel.filmName,
                imgUrl: this.cinemaModel.imgUrl,
                cinemaName: this.cinemaModel.cinemaName,
                cinemaId: this.cinemaId,
                cinemaAddress: this.cinemaModel.address,
            };

            getApp().globalData.subcontracting_movie.beforeSeats = para;
            let url = `/sub_pages/movie/seat/seat?showId=${e.showId}&cinemaId=${this.cinemaId}`;
            // uni.navigateTo({url})
            uni.navigateTo({
                url,
            });
        },
    },
};
</script>

<style scoped lang="scss">
.uls {
    padding: 30rpx;
    .lis {
        padding: 30rpx 0;
        @include flexCenterCenter();
        &-left {
        }
        &-time {
            @include font(36rpx, #333333, bold);
        }
        &-timetips {
            @include font(24rpx, #999999);
        }
        &-center {
            flex: 1;
            padding: 0 20rpx;
            display: flex;
        }
        &-top {
            @include flexCenterBetween();
        }
        &-name {
            @include font(24rpx, #999999);
        }
        &-price {
            @include font(38rpx, #ff8600, bold);
        }
        &-bottom {
            @include font(24rpx, #666666);
        }
        &-flex {
            flex: 1;
        }
        &-btn {
            width: 100rpx;
            height: 53rpx;
            border-radius: 50rpx;
            border: 1px solid #ff8600;
            @include font(26rpx, #ff8600);

            &.stop-ticket-sales {
                width: 130rpx;
                border: 1px solid #9f9f9f;
                @include font(26rpx, #9f9f9f);
            }
        }
        &-btn2 {
            width: 100rpx;
            height: 53rpx;
            border-radius: 50px;
            opacity: 1;
            border: 1px solid #00a0e5;
            @include font(26rpx, #00a0e5);
        }

        .li__price {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        .li__market {
            font-size: 24rpx;
            color: #101010;
            text-decoration: line-through;
        }
        .li__price__center {
            display: flex;
            align-items: center;
        }
        .li__price__txt {
            font-size: 24rpx;
            line-height: 24rpx;
            color: #fff;
            padding: 4rpx 6rpx;
            margin: 4rpx 0;
            border-radius: 6rpx;
            background-color: #ff8600;
        }
        .li__price__mit {
            font-size: 28rpx;
            color: #ff8600;
            margin-left: 8rpx;
        }
        .li__price__num {
            font-size: 28rpx;
            // color: #FF1600;
            color: #ff8600;
            // font-weight: bold;
        }
    }
    .bottom {
        @include flexCenterBetween;
        padding-top: 0;
        &-left {
            @include flexCenter;
        }
        &-lis {
            margin-left: 15rpx;
            padding: 5rpx 15rpx;
            height: 48rpx;
            border-radius: 10rpx;
            background-color: #ff6e30;
            @include flexCenter;
        }
        &-txt {
            @include font(20rpx, #fff);
        }
        &-predict {
            @include font(26rpx, #ff6e30);
            background-color: #fff;
            border-radius: 10rpx;
            margin-left: 15rpx;
            min-width: 50rpx;
            text-align: center;
            padding: 3rpx 10rpx;
        }
    }
}
</style>
